<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='点赞' :isSlot="false" :isNav="true"></navBar>

		<view class="agreeBox" v-for="item in likeBlog" :key="item.createdAt" @click="toBlog(item)">
			<image :src="item.blog.cover"></image>
			<view class="agreeBoxText">
				<view class="agreeBoxTextHeade">
					<text>{{item.blog.title}}</text>
					<u--text class="texts" :lines="2" :text="item.blog.content"></u--text>
				</view>
				<text>{{item.blog.userName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getLikeBlog
	} from "@/config/api.js"

	export default {
		data() {
			return {
				likeBlog: []
			};
		},
		onLoad() {
			this.initGetLikeBlog()
		},
		methods: {
			toBlog(data) {
				uni.navigateTo({
					url: '/subpages/bolg/bolg?id=' + data.blogId
				})
			},
			async initGetLikeBlog() {
				const res = await getLikeBlog(this.userInfo.token)
				this.likeBlog = res.data.data.rows
				console.log(this.likeBlog);
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 3vw;

		.agreeBox {
			width: 100%;
			height: 20vh;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30vw;
				height: 16vh;
				margin-left: 3vw;
			}

			.agreeBoxText {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 16vh;
				padding: 3vw;

				.agreeBoxTextHeade {
					display: flex;
					flex-direction: column;
				}
			}
		}
	}

	::v-deep .u-line-2 {
		margin-top: 5vw;
	}
</style>
